<template lang="pug">
view.videoComponents
  video.video(autoplay loop :src="`${prefix_image}/resultVideo.mp4`" :controls="false" :show-play-btn="false" :show-center-play-btn="false" object-fit="cover")
    view.navBar(:style="{ height: `${height + statusBarHeight + 5}px`, paddingTop: statusBarHeight + 'px' }")
      image(@tap="back" src="/static/previewVideo/whiteBack.png")
    view.container
      image(src="/static/startInterpretation/xiongDad.png")
      text.container-text 你的宝宝行为正在由
      text.container-text 顶级动物专家+AI大数据智能分析
      text.container-await 请稍等片刻
      view.container-loadNumber
        guiNumberAnimate(:num="100" :stepNumber="1000" :timer="10000" fontSize="72rpx" color="#FFD300" @done="done")
        | %
    view.relex
      image.relaxImage(src="/static/startInterpretation/relax.png")
</template>
<script>
import guiNumberAnimate from '@/GraceUI5/components/gui-number-animate.vue'
import {defineComponent,reactive, toRefs } from 'vue';
import config from '@/hooks/useConfig.js'
export default defineComponent({
    components:{
        guiNumberAnimate
    },
    setup() {
        const { prefix_image,height, statusBarHeight }=config()
        const data = reactive({
            height,
            statusBarHeight,
            prefix_image
        })
        const back = ()=>{
            uni.navigateBack()
        }
        return {
            ...toRefs(data),
            back
        }
    }
})
</script>
<style lang="stylus" scoped>
.videoComponents{
    width 100vw
    height: 100vh;
    video{
        width: 100%;
        height: 100%;
        position relative;
        .navBar{
            box-sizing: border-box
            position: absolute;
            top:0
            left:0;
            width: 100vh;
            font-size:32rpx;
            color:#fff;
            z-index:100;
            text-align: left;
            display: flex;
            overflow: hidden
            z-index:10;
            display: flex;
            align-items: center
            image{
                width:64rpx;
                height: 64rpx;
                margin-left:28rpx;
            }
        }
        .container{
            min-height: 50vh
            position absolute
            top:300rpx;
            width:100vw;
            display:flex;
            flex-direction: column;
            align-items: center
            >image{
                width: 136rpx;
                height: 136rpx;
                margin-bottom 28rpx;
            }
            &-text{
                font-size: 36rpx;
                font-weight: 600;
                color: #FFFFFF;
                line-height: 60rpx;
            }
            &-await{
                font-size: 32rpx;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 48rpx;
                margin-top 160rpx
            }
            &-loadNumber{
                font-size: 72rpx;
                font-weight: 800;
                color: #FFD300;
                line-height: 72rpx;
                margin-top 56rpx;
            }

        }
        .relex{
            width 100vw;
        
            position absolute
            bottom:0;
            text-align: center
            .relaxImage{

                width 300rpx;
                height: 288rpx;
            }
        }

    }

}

</style>